<!--
 * @Author: wangshuguang
 * @Date: 2022-03-15 17:10:45
 * @LastEditTime: 2022-03-30 20:05:29
 * @LastEditors: wangshuguang
 * @Description: 分享会员
-->

<template>
  <div class="shareMemIndex">
    <HeaderComp title="推广会员" :rightIconCallback="rightClick">
      <template #rightContent>
        <span class="rightIcon" style="color:#FEB518">帮助</span>
      </template>
    </HeaderComp>
    <div class="qrCodeInfo">
      <img class="qrCodeImg" src="../../../assets/img/flow/qrcode.png" alt="">
      <div class="btn" @click="saveImg">保存至相册</div>
    </div>
    <!-- 列表展示 -->
    <div class="dataList" >
      <div class="head">
        <div class="title">会员储值记录</div>
        <div class="rightInfo">累计推荐3人，提成100元</div>
      </div>
      <!-- 数据列表 -->
      <van-list
        class="listContent" 
        v-model="loading"
        offset="100"
        :finished="finished"
        finished-text="没有更多了"
        @load="getListData"
      >
        <div v-for="item of dataList" :key="item.num" class="listItem">
          <div>
            <div class="name">{{item.name}}</div>
            <div class="date">{{123}}</div>
          </div>
          <div >
            <div  class="money">提成<span>￥{{item.num}}</span></div>
            <div class="promoter">推广人{{ item.name }}</div>
          </div>
        </div>
      </van-list >
    </div>
  </div>
</template>

<script>

import { 
  queryMerchPromotePage, 
  queryMerchPromoteTotalData,
} from "@/api/flow/index";
import { savePicture } from "@/utils/utils";
import { mapGetters } from "vuex";
export default {
  data(){
    return {
      loading: false,
      finished: false,
      dataList: [],
      pageObj:{
        pageSize: 10,
        pageNum: 1
      },
    }
  },
  mounted(){
    this.getBaseData()
    console.log()
  },
  computed:{
    queryData(){
      return this.$route.query
    },
    ...mapGetters(['flowQueryData'])
  },
  methods:{
    getBaseData(){
      const { merchantId, userId } = this.flowQueryData
      let obj = { 
        merchantId, 
        userId
      }
      console.log('getBaseData', obj)
      queryMerchPromoteTotalData(obj).then(res => {
        console.log(res)
      })
    },
    saveImg(){
      // 保存至手机相册
      // savePicture()
    },
    rightClick(){
      this.$router.push('/shareMemHelp')
    },
    getListData(){
      const { merchantId, userId } = this.flowQueryData
      let obj = { 
        pageNum: this.pageObj.pageNum,
        pageSize: this.pageObj.pageSize,
        merchantId, 
        userId
      }
      console.log('getBaseData', obj)
      queryMerchPromotePage(obj).then(res => {
        console.log('queryMerchPromotePage',res)
        let { list, total } = res.data.data
        let arr = list
        console.log(res)
        this.dataList.push(...arr)
        this.pageObj.pageNum += 1
        if(this.dataList.length == total){
          this.finished = true
        }
      }).catch(res => {
        console.log('catch',res)
      })
    }
  },
}
</script>

<style lang='less' scoped>
  .shareMemIndex{
    height: 100%;
    background: #F9F9F9;
    .qrCodeInfo{
      text-align: center;
      padding: 65px;
      background: #FFFFFF;
      margin: 30px 0;
      .qrCodeImg{
        width: 270px;
      }
      .btn{
        width: 400px;
        margin: 60px auto 0;
        height: 80px;
        line-height: 80px;
        background: #FFB72F;
        border-radius: 40px;
        font-size: 32px;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
      }
    }
    .dataList{
      padding: 30px;
      background: #fff;
      .head{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title{
          font-size: 32px;
          font-weight: bold;
          color: #131313;
        }
        .rightInfo{
          font-size: 28px;
          font-weight: 500;
          color: #131313;
          opacity: 0.7;
        }
      }
      .listContent{
        .listItem{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 30px 0;
          border-bottom: 1px solid #E7E7E7;
          .name{
            font-size: 32px;
            font-weight: 500;
            color: #131313;
          }
          .date{
            font-size: 28px;
            font-weight: 400;
            color: #3D3D3D;
            opacity: 0.8;
            margin-top: 30px;
          }
          .money{
            font-size: 32px;
            font-weight: 500;
            color: #131313;
            span{
              color: #FFB72F;
            }
          }
          .promoter{
            font-size: 28px;
            font-weight: 500;
            color: #131313;
            margin-top: 30px;
          }
        }
      }
    }
  }
</style>
